<!DOCTYPE html>
{% extends "base.html" %}



{% block content %}

  <div class="container">

    <!-- Main hero unit for a primary marketing message or call to action -->
    <!--  Carousel - consult the Twitter Bootstrap docs at 
    http://twitter.github.com/bootstrap/javascript.html#carousel -->
    <div id="this-carousel-id" class="carousel slide">
      <div class="carousel-inner">
        <div class="item">
          <a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/"> 
            <img src="static/img/carousel/01.jpeg" alt="easy to manage">
          </a>
          <div class="carousel-caption">
            <p>問卷式記錄，管理記錄簡單方便！<a class="btn btn-large btn-success pull-right" data-toggle="modal" href="#myModal" >立即使用 Free!</a></p>
          </div>
        </div>
        <div class="item active">
          <a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">
            <img src="static/img/carousel/01.jpeg" alt="easy to track">
          </a>
          <div class="carousel-caption">
            <p>圖表式呈現，溝通病情清楚明瞭<a class="btn btn-large btn-success pull-right" data-toggle="modal" href="#myModal" >立即使用 Free!</a></p></p>
          </div>
        </div>
        <div class="item">
          <a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">
            <img src="static/img/carousel/03.jpeg" alt="you are not alone">
          </a>
          <div class="carousel-caption">
            <p>病症追蹤分享，你不再孤單！<a class="btn btn-large btn-success pull-right" data-toggle="modal" href="#myModal" >立即使用 Free!</a></p></p>
          </div>
        </div>
      </div><!-- .carousel-inner -->
      <!--  next and previous controls here
            href values must reference the id for this carousel -->
        <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
    </div><!-- .carousel -->
    <!-- end carousel -->

    <!-- Example row of columns -->
    <div class="row">
      <div class="span4 show-grid">
        <h2><img src="https://developers.google.com/chart/interactive/images/feature_dynamic.png"> 量化</h2>
         <p>透過問卷式的記錄，幫助您量化追蹤病症，一目了然！</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
      <div class="span4 show-grid">
        <h2><img src="https://developers.google.com/chart/interactive/images/feature_free.png"> 免費</h2>
         <p>生了得長期觀察的病真的很無奈，只好乖乖的追蹤。我們想到也許可以透過這樣的方式，有效的觀察自己的症狀，因此我們做了這個網站。我不希望生病，相信你也不願意。因此既然都做了，就分享出來給大家使用，不打算跟大家收錢，可以放心，大家好好養病吧！保持沒有壓力的心情，才是健康的王道。當然如果你很有錢很喜歡這個工具，也歡迎可以捐贈給我們。</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
     </div>
      <div class="span4 show-grid">
        <h2><img src="static/img/icon-shield.png"> 安全</h2>
        <p>生病並不需要遮掩，只是有時候我們並不希望有太多"關愛的眼光"，有時候我們很重視隱私，相信你也是。因此，我們採用 Google 應用服務引擎，由全世界最優秀工程師們來進行維運，神祕的資料保護技術就交給 Google 大神去處理了，我們，專心記錄面對我們的症狀就夠了！</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
    </div>
  </div>
{% endblock %}


    